<script lang="ts" setup>
import dayjs from 'dayjs'
import { wxPay } from '@/api/order'
import { getDetail } from '@/api/video';
import type { IProduct } from '@/typings/interface';
import { delayNavigateTo } from '@/utils/navigator';

const { base,success } = useToast()

let id = ref<number>()
let productInfo = ref<IProduct>()

// 获取课程id和课程信息
onLoad(async (option) => {
  id.value = option?.id
  let { data: videoInfo } = await getDetail(id.value!);
  productInfo.value = videoInfo
})

// 请求微信支付
async function goWechatPay() {
  const data = await wxPay({
    type: 'APP',
    id: id.value!,
  })
  if (data.code === 0) {
    // 调起微信支付
    uni.requestPayment({
      provider: 'wxpay',
      orderInfo: data.data,
      success: () => {
        delayNavigateTo(`/pages/detail/index?id=${id}`, { isRedirect: true })
        success('支付成功')
      },
      fail: () => {
        base('支付失败')
      }
    })
  } else {
    base(data.msg || '微信接口请求失败')
  }
}

</script>

<template>
  <view h-full>
    <view h-60 bg-gray-8 between px-4 text="22 white">
      <view flex items-center>
        <image w-26 h-26 mr-2 src="@/static/images/icons/order/time.png" />
        <text>30分钟后自动关闭此订单</text>
      </view>
      <text>代支付</text>
    </view>
    <view my-3 p-4 bg-white text="20 #555555">
      <view flex="~ col" gap-2 p-b-2 border="b #d7d7d7">
        <view between>
          <text>订单时间：</text>
          <text> {{ dayjs(new Date()).format('YYYY-MM-DD-HH:mm:ss') }}</text>
        </view>
        <view between>
          <text>课程总额：</text>
          <text>¥{{ productInfo?.amount }}</text>
        </view>
        <view between>
          <text>活动优惠：</text>
          <text text="#ff4439">
            - ¥{{ (productInfo?.old_amount! - productInfo?.amount!).toFixed() }}
          </text>
        </view>
      </view>
      <view between mt-4>
        <view />
        <view center>
          <text text="24 #555555">
            实付款:&nbsp;&nbsp;
          </text>
          <text text="28 #ff4439" font-extrabold>
            ¥{{ productInfo?.amount }}
          </text>
        </view>
      </view>
    </view>
    <view p-4 bg-white>
      <text text="28 #555555">
        支付方式
      </text>
      <view m="t-3.5 b-4" flex="~ wrap" between>
        <view class="b b-#d7d7d7 w-38%" h-80 rounded p="x-3.8 y-1" between mb>
          <view center>
            <image w-50 h-50 mr-2 src="/static/images/icons/order/wechat.svg" />
            <text text="30 #555555">
              微信支付
            </text>
          </view>
        </view>
      </view>
    </view>
    <view w-full py-3 bg-white around bottom-0 absolute class="b b-#d7d7d7">
      <view>
        <text text="24 #555555">
          实付款:&nbsp;
        </text>
        <text text="38 #ff4439" font-bold>
          ¥{{ productInfo?.amount }}
        </text>
      </view>
      <view around>
        <button ml p-0 m-0 leading-6 rounded-full w-160 text="24 white" class="bg-#ff4439" @click="goWechatPay">
          立即支付
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
  overflow: hidden;
  background-color: #f8f8f8;
}
</style>
